<template>
  <div class="food-search-box">
    <div class="food-search">
    <div class="food-search-top">
      <!-- 这个组件添加一个属性，获取是否添加取消图标，还有是否 -->
      <i class="iconfont icon-fanhui" v-on:click="goback()"></i>
      <div class="inp-box">
        <div class="icon-find">
          <i class="iconfont icon-sousuo"></i>
        </div>
        <input type="text" v-model="keywords" />

        <!-- 搜索和icon-del都返回food-search   复用得有个判断，food中没有这个-->
        <div class="icon-del" v-show="keywords" v-on:click="clearkeywords">
          <i class="iconfont icon-quxiao"></i>
        </div>
      </div>
      <!-- v-on:click="changekey" -->
      <div class="sousuo-text" v-bind:style="{opacity:keywords?'1':'0'}"> 
        <router-link :to="{path:'/menu-search',query:{keyword:keywords}}">搜索</router-link>
      </div>
    </div>
  </div>
  <div class="food-search-suggest">
    <ul v-if="keywords && suggest_list">
      <li v-for="(item,index) in suggest_list" v-bind:key="index">
        <router-link :to="{path:'/menu-search',query:{keyword:item.name}}">
        <div class="suggest-foodname">{{item.name}}</div>
        <div class="food-tags" v-if="item.tag" v-bind:style="{borderColor:item.tag.border_color,backgroundColor:item.tag.background_color,color:item.tag.text_color}">{{item.tag.name}}</div>
        </router-link>
      </li>
    </ul>
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keywords: "",
      suggest_list: [],
    };
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    getsuggestfood() {
      let _this = this;
      this.suggest_list = [];
      if(this.keywords){
        let url = `https://apis.netstart.cn/douguo/recipe/search/suggests`;
      let promise = axios.get(url, { params: { kw: _this.keywords } });
      promise.then((res) => {
        // console.log(res.data.result);
        _this.suggest_list = res.data.result.suggests;
        console.log(_this.suggest_list);
      });
      }
    },
    clearkeywords(){
      this.keywords = "";
    },
    // changekey(){
    //   console.log("是否调用");
    //   let mydata = JSON.parse(localStorage.getItem("mydata_list"));
    //         if(mydata){
    //             mydata[0].keyword = this.keywords;
    //             // console.log(mydata[0].keyword,"keyword");
    //             localStorage.setItem("mydata_list",JSON.stringify(mydata))
    //         }else{
    //           let arr = [];
    //             let obj = {};
    //             obj.keyword = this.keywords;
    //             obj.order = 0
    //             obj.type = 0;
    //             obj.offset = 0;
    //             obj.limit = 20;
    //             arr.push(obj);
    //             localStorage.setItem("mydata_list",JSON.stringify(arr));
    //         }
    // }
  },

  created() {
    this.keywords = this.$route.params.words;
    if (this.keywords) {
      this.getsuggestfood();
    }
  },
  watch:{
    keywords:function(newVal,oldVal){
      console.log(oldVal,"=>",newVal);
      if(newVal != undefined){
        this.getsuggestfood();
      }
    }
  }
};
</script>

<style lang="scss">
@import url("../assets/css/style.css");

.food-search-box{
  width: 100%;
  overflow: hidden;
  .food-search {
  width: 100%;
  padding: 10px;
  height: 50px;
  box-sizing: border-box;
  position: fixed;
  background-color: white;
  .food-search-top {
    height: 30px;
    width: 100%;
    // background-color: red;
    display: flex;
    font-size: 0;

    box-sizing: border-box;
    justify-content: space-between;
    .icon-fanhui {
      height: 30px;
      font-size: 30px;
      line-height: 30px;
      text-align: center;
    }
    .inp-box {
      height: 30px;
      width: 70%;
      // background-color: red;
      display: flex;
      font-size: 0;
      background-color: #f5f5f5;
      // justify-content: space-between;

      .icon-find {
        height: 30px;
        width: 30px;
        text-align: center;
        margin-right: 10px;
        i {
          height: 30px;
          font-style: 30px;
          line-height: 30px;
        }
      }
      input {
        border: 0;
        outline: none;
        background-color: #f5f5f5;
      }
      .icon-del {
        font-size: 0;
        height: 30px;
        width: 30px;
        text-align: center;
        i {
          height: 30px;
          font-size: 20px;
          line-height: 30px;
        }
      }
    }

    .sousuo-text {
      width: 15%;
      height: 30px;
      line-height: 30px;
      font-size: 16px;
      text-align: center;
    }
  }
}
.food-search-suggest{
  margin-top: 50px;
  box-sizing: border-box;
  ul{
    width: 100%;
    li{
      height: 30px;
      padding: 0 5px;
      
      width: 100%;
      box-sizing: border-box;
      border-bottom: 1px solid #ccc;
      
      a{
        width: 100%;
        height: 30px;
        display: flex;
      justify-content: space-between;
        .suggest-foodname{
        height: 30px;
        width: 60%;
        line-height: 30px;
        font-size: 16px;
        
      }
      .food-tags{
        // width: 40%;
        width: 50px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        box-sizing: border-box;
        border: 2px solid transparent;
        border-radius: 15px;
        font-size: 12px;
        
      }
      }
    }
  }
}
}
</style>